<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快来听听我弹的《{{data['score_name']}}》</title>
    <link rel="stylesheet" href="{{url_for('static',filename='reset.css')}}">
    <link rel="stylesheet" href="{{url_for('static',filename='APlayer.min.css')}}">
    <style>
        body {
            position: relative;
            width: 100%;
            overflow-y: scroll;
            background: #eeeeee;
        }

        .main {
           position: relative;
        }

        .main .main-load{
            display: block;
            background: rgba(0,0,0,0.7);
            z-index: 10;
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right:0;
        }
        .main .main-load .load-container{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top:50%;
            margin-top: -1rem;
            left:50%;
            margin-left:-1rem;
        }
        .main .main-load .load-container .load-img{
            width: 1rem;
            height: 1rem;
        }
        .main .main-load .load-container p{
            margin-top:0.05rem;
            font-size: 0.28rem;
            color:#fff;
        }
        .main .main-head {
            position: relative;
            height: 1rem;
            width: 100%;
            background: #362E3C;
            line-height: 1rem;
        }

        .main .main-head .head-logo {
            display: inline-block;
            width: 0.55rem;
            height: 0.55rem;
            margin-left: 0.3rem;
        }

        .main .main-head .head-head {
            display: inline-block;
            width: 1.35rem;
            height: 0.29rem;
            margin-left: 0.16rem;
        }

        .main .main-head .head-word {
            position: absolute;
            top: 0.015rem;
            left: 50%;
            margin-left: -1.15rem;
            height: 0.36rem;
            width: 2.3rem;
            text-align: center;
        }

        .main .main-head .head-word p {
            color: #fff;
            font-size: 0.24rem;
            text-align: center;
        }

        .main .main-container {
            position: relative;
            width: 100%;
            height: 6.61rem;
            background: url('/static/share_img/bg@2x.png') no-repeat center;
            background-size: cover;
        }

        .main .main-personal {
            position: relative;
            width: 100%;
            background: #fff;
            padding: .33rem .76rem .33rem .35rem;
            box-sizing: border-box;
        }

        .main .main-personal .personal-head {
            display: inline-block;
            vertical-align: middle;
            margin-right: .28rem;
            width: 1.3rem;
            height: 1.3rem;
            border-radius: 50%;
            box-sizing: border-box;
            position: relative;
        }

        .main .main-personal .personal-head .avatar{
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }
        .main .main-personal .personal-head .head-first{
            display: none;
        }

        .main .main-personal .personal-head .head-wing{
            width: 0.44rem;
            height:0.38rem;
            position: absolute;
            top:-0.17rem;
            left:0.03rem;
        }

        .main .main-personal .personal-head .head-high{
            width: 1.7rem;
            height:0.43rem;
            position: absolute;
            bottom:-0.21rem;
            left:50%;
            margin-left:-0.85rem;
        }

        .main .main-personal .personal-word {
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
            width:4.6rem;
        }

        .main .main-personal .personal-word p:first-child {
            font-family: PingFang-SC-Medium;
            font-size: 0.34rem;
            color: #333333;
        }

        .main .main-personal .personal-word p:last-child {
            margin-top: 0.1rem;
            font-family: PingFang SC;
            font-size: 0.24rem;
            color: #333333;
        }

        .main .main-bottom {
            width: 100%;
            padding-top: 0.46rem;
            background: #eeeeee;
        }

        .main .main-bottom .bottom-download {
            display: inline-block;
            vertical-align: top;
            width: 2.6rem;
            height: 0.8rem;
            border:1px solid #7969E6;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            color: #7969E6;
            text-align: center;
            line-height: 0.8rem;
            margin-bottom: 0.42rem;
            margin-right: 0.6rem;
        }
        .main .main-bottom .bottom-open {
            display: inline-block;
            vertical-align: top;
            width: 2.6rem;
            height: 0.8rem;
            background: #7969E6;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            color: #fff;
            text-align: center;
            line-height: 0.8rem;
            margin-bottom: 0.42rem;
        }
        .main .main-bottom a {
            text-decoration: none;
            color: #7969E6;
            font-size: 0.28rem;
            display: inline-block;
        }
        .main .main-bottom p .bottom-a{
            text-decoration: none;
            color: #7969E6;
            font-size: 0.28rem;
            display: inline-block;
            border-bottom: 2px solid #7969E6;
        }
    </style>
    <script type="text/javascript">
        (function () {
            window.zhuge = window.zhuge || [];
            window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
            window.zhuge.factory = function (b) {
                return function () {
                    var a = Array.prototype.slice.call(arguments);
                    a.unshift(b);
                    window.zhuge.push(a);
                    return window.zhuge;
                }
            };
            for (var i = 0; i < window.zhuge.methods.length; i++) {
                var key = window.zhuge.methods[i];
                window.zhuge[key] = window.zhuge.factory(key);
            }
            window.zhuge.load = function (b, x) {
                if (!document.getElementById("zhuge-js")) {
                    var a = document.createElement("script");
                    var verDate = new Date();
                    var verStr = verDate.getFullYear().toString() + verDate.getMonth().toString() + verDate.getDate().toString();

                    a.type = "text/javascript";
                    a.id = "zhuge-js";
                    a.async = !0;
                    a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                    a.onerror = function () {
                        window.zhuge.identify = window.zhuge.track = function (ename, props, callback) {
                            if (callback && Object.prototype.toString.call(callback) === '[object Function]') callback();
                        };
                    };
                    var c = document.getElementsByTagName("script")[0];
                    c.parentNode.insertBefore(a, c);
                    window.zhuge._init(b, x)
                }
            };
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var env = window.location.host.indexOf('dev') > 0 || window.location.host.indexOf('pre') > 0
            var debug = env ? true : false;
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
            window.zhuge.load('99944c90bdfe483ab3596e7f99f20c2e', {
                debug: debug,   // 埋点是否实时调试
                platform: { //自定义触发环境信息(选填)
                    '版本': 'v4.2'
                },
                superProperty: { //全局的事件属性(选填)
                    '应用名称': 'The ONE智能钢琴（新）'
                },
                utm: {
                    'utm_source': channel
                },
                autoTrack: true,
                //启用全埋点采集（选填，默认false）
                singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）
            });
        })();
    </script>
</head>

<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>
<body>
    <style>
        .aplayer {
            position: absolute;
            bottom: 0;
            height: 1.37rem;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            margin: 0;
            padding: 0;
        }

        .aplayer .aplayer-pic {
            height: 1.37rem;
            width: 1.5rem;
            background: none;
        }

        .aplayer .aplayer-pic .aplayer-button {
            width: 0.72rem;
            height: 0.72rem;
            border: 2px solid #fff;
            top: 50%;
            left: 50%;
            margin: -0.36rem 0 0 -0.36rem;
            opacity: 1;
        }

        .aplayer .aplayer-pic .aplayer-play .aplayer-icon {
            position: absolute;
            top: 0;
            left: 0.05rem;
            height: 0.72rem;
            width: 0.72rem;
        }

        .aplayer .aplayer-pic .aplayer-button .aplayer-fill {
            fill: #ffffff;
        }

        .aplayer .aplayer-pic .aplayer-button .aplayer-icon-pause {
            height: 0.56rem;
            width: 0.56rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.28rem;
            margin-left: -0.28rem;
        }

        .aplayer-icon {
            color: #ffffff;
        }

        .aplayer-icon:before {
            display: none !important;
        }

        .aplayer .aplayer-info {
            position: absolute;
            left: 1.5rem;
            top: 0.35rem;
            width: 4.1rem;
            margin: 0 !important;
            padding: 0 !important;
        }

        .aplayer .aplayer-info .aplayer-music {
            display: none;
        }

        .aplayer .aplayer-info .aplayer-controller {
            margin-top: 0.3rem;
            display: block;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
            height: 0.02rem;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
            margin-top: -0.17rem;
            width: 0;
            height: 0;
            display: block;
            padding: 0.07rem;
            background: red;
            border: 0.12rem #fff solid !important;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time {
            margin: 0 !important;
            padding: 0 !important;
            position: absolute;
            right: -1.6rem;
            top: -0.06rem;
            color: #fff;
            font-size: 0.24rem;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
            display: none;
        }
    </style>
    <div class="main">
        <div class="main-load">
            <div class="load-container" align="center">
                <div class="load-img">
                    <img src="{{url_for('static',filename='share_img/white.gif')}}" alt="">
                </div>
                <p>演奏准备中...</p>
            </div>
        </div>
        <div class="main-head">
            <div class="head-logo">
                <img src="{{url_for('static',filename='share_img/logo@3x.png')}}" alt="">
            </div>
            <div class="head-head">
                <img src="{{url_for('static',filename='share_img/head@3x.png')}}" alt="">
            </div>
            <div class="head-word">
                <p>来自未来的音乐教育</p>
            </div>
        </div>
        <div class="main-container">
            <div id="player" class="aplayer"></div>
        </div>
        <div class="main-personal">
            <div class="personal-head">
                <img src="{{data['avatar']}}" alt="" class="avatar">
            </div>
            <div class="personal-word">
                <p>{{data['nickname']}}</p>
                <p>我会弹琴啦，等你哦~</p>
            </div>
        </div>
        <div class="main-bottom" align="center">
            <a href="http://www.1tai.com/download-smartpiano.html">
                <span class="bottom-download">下载</span>
            </a>
            <span class="bottom-open" id="btn">打开</span>
            <p><a class="bottom-a" href="http://shop.1tai.com/h5/" id="openShop">了解TheONE智能钢琴</a></p>
        </div>
    </div>
    <script src="/static/APlayer.min.js"></script>
    <script src="/static/js/util.js"></script>
    <script>

        var timer = setTimeout(() => {
            xmlHttp("{{data['mp3_url']}}")
        }, 500)

        function xmlHttp(url) {
            var xml = new XMLHttpRequest()
            xml.open('get', url, true)
            xml.send(null)
            xml.onreadystatechange = function () {
                if (xml.readyState === 4) {
                    if (xml.status !== 404) {
                        clearTimeout(timer)
                        timer = null
                        load.style.display = 'none'
                    }
                }
            }
        }

        var btn = document.querySelector('#btn')
        var load = document.querySelector('.main-load')
        var openShop = document.querySelector('#openShop')
        var ua = window.navigator.userAgent.toLocaleLowerCase()
        var isAndroid = /android/.test(ua)
        var isIOS = /ipad|iphone|ipod/.test(ua)
        var score_name = "{{data['score_name']}}";
        var universalLink = "{{ data['app_url'] }}"
        var loadApp = document.querySelector('.bottom-download')

        var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';

        universalLink = formatUrl(universalLink)

        universalLink = universalLink + '&from=' + encodeURIComponent(channel) + '&from_page=' + encodeURIComponent('录音')

        btn.addEventListener('click', function() {
            zhuge.track('录音分享页-点击打开', {
                '单曲名称': score_name,
                '分享渠道': channel
            })
            window.location.href = universalLink;
        }, false)

        zhuge.track('点击分享链接', {
            '分享内容': '录音',
            '分享渠道': channel
        })


        loadApp.addEventListener('click', function() {
            zhuge.track('录音分享页-点击下载', {
                '单曲名称': score_name,
                '分享渠道': channel
            })
        }, false)

        openShop.addEventListener('click', function() {
            zhuge.track('评测分享页-点击官网链接', {
                '单曲名称': score_name,
                '分享渠道': channel
            })
        }, false)

        var player = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: false,
            showlrc: false,
            preload: 'auto',
            mode: 'loop',
            music: {
                url: "{{data['mp3_url']}}",
            }
        })

    </script>
</body>

</html>